<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=>, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/audio.css" />
</head>
    <body background="./img/bg0.png">
        <!-- 上半部分 -->
         <div class="upper-container">
        <!-- 唱片 -->
         <div class="record-container">
            <div class="record-bg">
                <div class="rotate-play">唱片图片</div>
            </div>
         </div>
         <!-- 歌曲名 -->
          <div class="introduction-container">
          <div class="text-container">
          <div class="music-title">音乐1</div>
          <div class="author-container">
            作者：
          <span id="author-name">歌手名会变</span>
            </div>
           </div>
          </div>
         </div>
         <!-- 下半部分 -->
          <div class="aduio-box">
            <div class="aduio-container">
                <aduio src=""></aduio>
                <!-- 进度条 -->
                 <div class="a-progress">
                  <div class="pgs-total">
                    <div class="pgs-play"style="width: 10%"></div>
                  </div>
                 </div>
                 <!-- 下排控制按钮 -->
                  <div class="a-controls">
                    <!-- 播放时间 -->
                    <div class="time-container">
                      <span class="played-time">00:00</span>
                      &nbsp;/&nbsp;
                      <span class="dudio-time">00:00</span>
                    </div>
                    <!-- 下排中间按钮 -->
                    <div class="center-button-container"></div>
                    <!-- 播放模式 -->
                     <div class="center-icon mode"></div>
                     <!-- 上一首 -->
                     <div class="center-icon s-left"></div>
                     <!-- 播放/暂停 -->
                     <div class="center-icon icon-play"></div>
                     <!-- 下一首 -->
                     <div class="center-icon s-right"></div>
                     <!-- 音量按钮 -->
                     <div class="center-icon volumn"></div>
                     <!-- 音量进度条 -->
                     <input type="range" title="70%" name="change" min="0" max="100" step="1" value="70" />
                     <div class="bottom-button-container"></div>
                    <!-- 列表 -->
                     <div class="list"></div>
                    <!-- 倍速 -->
                    <div class="speed">1.0X</div>
                    <!-- MV播放按钮 -->
                   <div class="MV"></div>
                  </div>
            </div>
          </div>

      
      
          <!-- 关音乐列表 -->
           <div class="close-list"></div>
          <!-- 音乐列表 -->
      <div class="music-list">
        <div class="music-list-container">
          <div class="music-list-title">播放列表</div>
          <hr class="line">
          <div class="all-list">
            <div class="music0">洛春赋</div>
            <div class="music1">Yesterday</div>
            <div class="music2">江南烟雨色</div>
            <div class="music3">Version</div>
          </div>
        </div>
      </div>
    </body>
</html>
<script src="./js/aduio.js"></script>